﻿<html>
<head>
    <title>K线图</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <link href="/src/css/main.css" rel="stylesheet"/>
    <script src="/lib/sockjs.js"></script>
    <script src="/lib/stomp.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/lib/jquery.mousewheel.js"></script>
    <style type="text/css">
        .kline {
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            height: 462px;
            position: relative;
        }
    </style>
</head>

<body>

<div class="kline">

    <h1>K线图</h1>

    <div id="kline_container"></div>

    <hr>

    <input id="interval-time" type="text" value="5000">
    <button id="socket-set-interval">Set Interval Time</button>
    <hr>

    <button id="socket-connect">Connect</button>

    <button id="socket-disconnect">Disconnect</button>

    <button id="socket-pause">Pause</button>

    <button id="socket-resend">Resend</button>

</div>

<script src="/dist/kline.js"></script>

<script type="text/javascript">

    var kline = new Kline({
        element: "#kline_container",
        width: 1200,
        height: 650,
        theme: 'dark', // light/dark
        language: 'zh-cn', // zh-cn/en-us/zh-tw
        ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
        symbol: "BTC/USD",
        symbolName: "BTC/USD",
        type: "stomp", // poll/stomp
        url: 'https://www.bcoin.sg/v1/socket',//'https://127.0.0.1/v1/socket',
        limit: 1000,
        intervalTime: 5000,
        subscribePath: "/trade/kline",
        sendPath: "/trade/kline",
        debug: true,
        showTrade: true,
        enableSockjs: true
    });

    kline.draw();

    $('#socket-pause').click(function () {
        kline.pause();
    });

    $('#socket-resend').click(function () {
        kline.resend();
    });

    $('#socket-connect').click(function () {
        kline.connect();
    });

    $('#socket-disconnect').click(function () {
        kline.disconnect();
    });

    $('#socket-set-interval').click(function () {
        var intervalTime = $('#interval-time').val();
        kline.setIntervalTime(intervalTime);
    });

</script>

</body>

</html>
